Linking Web Documents

Linking is the most essential feature of the Web. It lets you reference other HTML documents and files inside your own document. This capability is what gives the Web its name; the links in documents that span the computers around the world really do create a World Wide Web.

Link Basics

Here's a simple example of links. The HTML code for this sentence:

Please visit the Windows Magazine home page.

looks like:

Please visit the <A HREF="http://www.winmag.com"> Windows Magazine home page</A>.

(View the HTML source if you don't believe me!)

On most browsers, anything you stick between the <A HREF=...> and </A> will be highlighted in a different color and also underlined. On Netscape and MSIE, the default color for an unvisited (not yet clicked) link is blue. You can change the color with options in the BODY tag, but I'm not a fan of doing that. You may confuse people who expect a blue link.

Web convention is to make links out of only a short phrase or a single word. You could make a whole sentence, paragraph, or document into a single link, but the highlighting and underlining is not exactly conducive to easy reading. Keep it small.

Graphics as Links

It's easy to make a graphic be part of a link. Just include a reference to the graphic inside the link definition:

<A HREF="file.htm"><IMG SRC="image.gif"></A>

By default, when you include a graphic inside a link it will be surrounded by a border that's the same color as the link highlight color. If you prefer, you can change the size of this border, or eliminate it completely, using the BORDER option of the IMG tag. For example, all of these graphics are linked, but they use different BORDER options:

If you turn the border off for linked graphics, make sure that it's still obvious the graphic is a link. You can do this by putting a text label in the graphic, or by shaping the graphic like a button (The graphic I used above doesn't meet this requirement; who wants to click on a toilet?)

Dropping Anchors

Sometimes it's convenient to jump to a point in an HTML document other than the top. You can name multiple points in a documents, called anchors, that can be referenced later. This is done with the command <A NAME=anchorname>. Technically, an anchor definition like this should be closed with </A>. You'll see situations where this rule is violated and the browser doesn't explode, but your own HTML should follow the rules and close the definition.

Just because anchors offer a way to jump into the middle of a document, don't think you are now free to have documents as large as you want. Web-surfing users don't want to read novels, they want short items that can be quickly loaded and easily browsed.

So how do you jump to the anchors you just defined? We discussed that in the section on URL names. (An even easier way: the link you see here uses an anchor, so view the source and see how it's done!)

[Go back to Contents page]